<template>
  <div class="purchase-refund-management">
    <h2>采购退货管理</h2>
    <!-- 筛选区 -->
    <el-form :inline="true" class="filter-form">
      <el-form-item label="退货单号">
        <el-input v-model="filters.RefundNum" placeholder="请输入退货单号" clearable/>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="filters.ProductName" placeholder="请输入产品名称" clearable/>
      </el-form-item>
      <el-form-item label="采购单号">
        <el-input v-model="filters.PurchaseId" placeholder="请输入采购单号" clearable/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="filters.State" placeholder="请选择状态" style="width: 120px;" clearable >
          <el-option label="已退货" value="1" />
          <el-option label="已取消" value="2" />
          <el-option label="处理中" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="refundNum" label="退货单号" />
      <el-table-column prop="productId" label="产品编号" />
      <el-table-column prop="productName" label="产品名称" min-width="130"/>
      <el-table-column prop="productSpecs" label="产品规格" min-width="130"/>
      <el-table-column prop="unitId" label="单位" />
      <el-table-column prop="price" label="单价" />
      <el-table-column prop="num" label="退货数" />
      <el-table-column prop="total" label="总额" />
      <el-table-column prop="purchaseId" label="采购单号" />
      <el-table-column prop="vendorName" label="供应商名称" />
      <el-table-column prop="state" label="状态" :formatter="formatState" />
      <el-table-column prop="madeTime" label="创建时间" :formatter="formatDate" min-width="180" />
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            @click="handleAccounting(row)"
            :disabled="row.state !== 1"
          >
            入账
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pages.PageIndex"
        v-model:page-size="pages.PageSize"
        :total="pages.totalCount"
        :page-sizes="[10, 15, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import moment from 'moment';
import http from '@/http/axiosHelper';

const router = useRouter();

onMounted(()=>{
  onSearch();
})

const filters = reactive({
  RefundNum: '',
  ProductName: '',
  PurchaseId: '',
  State: ''
})

const pages=reactive({
  PageIndex:1,
  PageSize:15,
  totalPage:0,
  totalCount:0
})

watch(pages,()=>{
  onSearch();
})

const tableData = ref([])
import Purchase from '@/http/PurSale';
const onSearch=() => {
  http.get("/scmreadconsul/api/PurchaseRefund/GetPurchaseRefund",{
    params:{
      RefundNum: filters.RefundNum,
      ProductName: filters.ProductName,
      PurchaseId: filters.PurchaseId,
      State: filters.State,
      PageIndex: pages.PageIndex,
      PageSize: pages.PageSize
    }
  }).then(res=>{
    tableData.value = res.data.items;
    pages.totalCount = res.data.totalCount;
    pages.totalPage = res.data.totalPage;
  })
}

// 分页事件处理
const handleSizeChange = (val: number) => {
  pages.PageSize = val;
  pages.PageIndex = 1; // 重置为第一页
}

const handleCurrentChange = (val: number) => {
  pages.PageIndex = val;
}

// 格式化日期
const formatDate = (row: any, column: any, cellValue: any) => {
  if (!cellValue) return '';
  return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
}

// 格式化状态
const formatState = (row: any, column: any, cellValue: any) => {
  switch(cellValue){
    case 1: return '已退货';
    case 2: return '已取消';
    case 3: return '处理中';
    default: return '未知';
  }
}

// 格式化是否删除
const formatIsDel = (row: any, column: any, cellValue: any) => {
  return cellValue ? '是' : '否';
}

// 处理入账操作
const handleAccounting = (row: any) => {
  // 将退货数据转换为应付款数据格式
  const payableData = {
    refundNum: row.refundNum,
    productName: row.productName,
    vendorName: row.vendorName,
    total: row.total,
    purchaseId: row.purchaseId,
    productId: row.productId,
    productSpecs: row.productSpecs,
    unitId: row.unitId,
    price: row.price,
    num: row.num,
    madeTime: row.madeTime
  };
  
  // 跳转到应付款管理页面，并传递数据
  router.push({
    name: 'ShowPayableManagement',
    query: {
      fromRefund: 'true',
      data: JSON.stringify(payableData)
    }
  });
};
</script>

<style scoped>
.purchase-refund-management {
  padding: 24px;
}
.filter-form {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>